<template>
  <div>
    <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal">

      <el-submenu index="1" :path="{path:'/home'}">
        <template slot="title">用户管理</template>
        <el-menu-item :index="{path:'/home/userInfo'}">用户信息</el-menu-item>
        <el-menu-item :index="{path:'/home/userOnline'}">在线用户</el-menu-item>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">角色管理</template>
        <el-menu-item :index="{path:'/home/addRoleManage'}">角色授权</el-menu-item>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">应用管理</template>
        <el-menu-item :index="{path:'/home/AppIndex'}">应用列表</el-menu-item>
      </el-submenu>

      <el-menu-item @click="loginOut">
        <span>退出登录</span>
      </el-menu-item>
    </el-menu>
    <div>
      <router-view/>
    </div>

  </div>
</template>

<script>
  import {userLoginOut} from '@/api/user'
  import {removeToken, getTokenKey} from '@/utils/auth'

  import {baseRoutes} from '@/router/index'

  export default {
    name: "index",
    data() {
      return {
        activeIndex: '1',
        baseRoutes
      }
    },
    methods: {
      loginOut() {
        this.$confirm('确定退出当前用户吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          userLoginOut().then(() => {
            this.$message({
              type: 'success',
              message: '退出成功!'
            });
            removeToken();
            this.$router.push('/login')
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    }
  }
</script>

<style scoped>

</style>
